<template>
	<!-- 师傅-设备管理 -->
	<view class="main">
		<!-- 上部搜索栏 -->
		<view class="search" v-if="userInfo.is_worker == 2">
			<text class="iconfont icons" style="background-color: #f4f5f6;">&#xe635;</text>
			<combox ref="box" style="background-color: #f4f5f6;width: 100%;" :value="keyword1" placeholder="请选择您要添加的门店"
				emptyTips="暂无匹配门店" labelWidth="0px" :candidates="options1" @input="change"></combox>
			<!-- <button class="edit-btn " style="margin-left: 50rpx;" @click="choose">搜索</button> -->
		</view>
		<view class="search1" style="display: inline-block;" v-if="userInfo.is_worker != 2">
			<!-- 自定义Placeholder -->
			<uni-search-bar placeholder="搜索你想查找的设备" v-model="keyword" cancelButton="none" @confirm="search">
			</uni-search-bar>
		</view>
		<!-- 下部设备信息 -->
		<view class="sbgl">
			<!-- 左侧设备分类 -->
			<view class="mean" :style="{'margin-top':mtp}">
				<!-- <view class="mean-box"> -->
				<view class="mean-name word-omit" :class="{'mean-bg':mean.id ==value }" @click="changeMean(mean.id)"
					v-for="mean in sbglMean" :key="mean.id">{{ mean.cate_name }}</view>
			</view>
			<!-- </view> -->
			<!-- 右侧设备详情 -->
			<view class="detail">
				<view class="detail-search" v-if="userInfo.is_worker == 2">
					<lauwen-select type="2" :options="options2" :defaultIndex="'tip2'" :height="45" :padding="10"
						:fontSize="'1rem'" @getValue="getValue2"></lauwen-select>
					<!-- 		<lauwen-select type="3" :options="options3" :defaultIndex="'tip3'" :height="45" :padding="10"
						:fontSize="'1rem'" @getValue="getValue3"></lauwen-select> -->
				</view>
				<view :class="[userInfo.is_worker == 2?'detail-list':'']">
					<scroll-list ref="list" :option="list" @load="load" @refresh="refresh" style="height: 80%;">
						<view class="detail-desc" v-for="equipment in list" :key="equipment.id">
							<image :src="equipment.image" style="width: 150rpx;height: 150rpx;margin: 20rpx;"></image>
							<view style="width: calc(100% - 150rpx)">
								<view class="word-omit" style="color: #333333;">{{ equipment.store_name }}</view>
								<view :style="{color:'#029E8E',fontSize:'20rpx'}">
									品牌型号：{{ equipment.cate_name || equipment.cate_name1}}</view>
								<view style="font-size: 26rpx;"
									:class="[userInfo.is_worker == 2? 'word-omit' : 'text-omit']">
									核心零配件：{{ equipment.store_info }}</view>
								<view class="detail-num" v-if="userInfo.is_worker == 2">
									<text class="c66">添加数量:<text class="c66 ml30"
											v-if="!ischoose">{{equipment.num}}</text></text>
									<wm-numberBox model="0" :min="equipment.num" :value="equipment.num || 0"
										style="margin-left: -50rpx;" :ID="equipment.id" v-if="ischoose"
										@change="addShopCart"></wm-numberBox>
								</view>

							</view>
						</view>

					</scroll-list>

				</view>
			</view>
		</view>
		<view class="footer flex" v-if="userInfo.is_worker == 2">
			<view class="btn" @click="look">已选{{num}}件</view>
			<view class="btn btn1" @click="jumpTo">添加设备</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="empty " v-if="!shopcar.length">
					<view class="iconfont empty-s">
						&#xe620;
					</view>
					<view>
						您还没有添加设备!
					</view>
				</view>
				<view class="shop_item1" v-if="shopcar.length">
					<scroll-view scroll-y style="height: 100%;" class="item" v-for="(item,index) in shopcar"
						:key="index">
						<image :src="item.image" style="width: 80rpx;height: 80rpx;border-radius: 10rpx;"
							mode="aspectFill"></image>
						<view class="name">配件名:{{item.store_name}}</view>
						<view class="ppname">品牌:{{item.cate_name || item.cate_name1}}</view>
						<view class="add">
							x {{item.num}}
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lauwenSelect from "@/components/lauwen-select/lauwenSelect.vue"
	import wmNumberBox from "@/components/wm-numberBox/wm-number-box.vue"
	import uniSearchBar from '@/components/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
	import combox from "../../../components/uni-ui/lib/uni-combox/uni-combox.vue"
	import {
		allDeviceList,
		deviceList,
		selectedDevice,
		getDeviceCategory,
		selectClienUser
	} from '../../../api/api.js'
	export default {
		components: {
			combox,
			lauwenSelect,
			wmNumberBox,
			uniSearchBar
		},
		data() {
			return {
				num: 0,
				ischoose: false,
				userInfo: {},
				mtp: "",
				limit: 10,
				page: 1,
				alldata: "",
				keyword1: "",
				shopcar: [],
				options: [],
				options1: [], // 门店
				options2: [], //品牌
				options3: [], //配件
				vModelValue: 1, // 步进器
				value: '',
				// 设备菜单
				sbglMean: [],
				keyword: "",
				// 设备描述
				pid: 0,
				list: [],
				cate_id2: 0,
				cate_id3: 0
			}
		},
		created() {
			console.log('22222', )
			let car = uni.getStorageSync('shopcar')
			if (!car) this.shopcar = []
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo.is_worker == 2) {
				this.getall() //获取每个门店都有的
			}
			this.getDeviceCategory()
			this.selectClienUser()
			this.datainit()
			this.shopcarAmount()
			if (this.userInfo.is_worker != 2) return this.mtp = '30rpx'
		},
		methods: {
			// 查看购物车
			look() {
				this.$refs.popup.open()
			},
			// 购物车区分新旧设备
			dealShopCar() {
				let newshop = []
				let oldshop = []
				console.log('查看', uni.getStorageSync('oldshop'), uni.getStorageSync('oldshop'))
				this.shopcar.forEach(item => {
					if (!item.goods_id && !item.flag) {
						newshop.push(item)
					} else if (item.flag) {
						oldshop.push(item)
					} else {
						oldshop.push(item)
					}
				})
				uni.setStorageSync('oldshop', oldshop), uni.setStorageSync('newshop', newshop)
			},
			// 添加设备
			jumpTo() {
				this.dealShopCar()
				let name = this.$refs.box.inputVal
				let flag = false
				this.options.forEach(item => {
					if (item.nickname == name) {
						flag = true
						console.log('flag', flag)
					}
				})

				this.flag = flag
				if (flag) {
					if (!this.shopcar.length) {
						uni.setStorageSync('newshop', [])
						uni.navigateTo({
							url: "/pages/sf/savesb/index"
						})
					} else {
						uni.navigateTo({
							url: "/pages/sf/yxsb/index"
						})
					}
					return
				}


				if (!flag) return uni.showToast({
					title: "请选择门店!",
					icon: "none"
				})
			},
			// 获取模糊查询数据
			change() {
				if (this.$refs.box.inputVal == '') {
					this.flag = false
					this.datainit()
					return
				}
				this.keyword1 = this.$refs.box.inputVal
				let flag = false
				let uid = ''
				this.selectClienUser(true)

				let name = this.$refs.box.inputVal
				this.options.forEach(item => {
					if (item.nickname == name) {
						uid = item.uid
						this.store = item
						flag = true
						uni.setStorageSync('store', this.store)
						// this.ischoose = true
						console.log('flag', flag)
					} else return this.ischoose = false
				})

				if (flag) {
					this.list = []
					let data = {
						uid: uid
					}
					selectedDevice(data).then(res => {
						this.ischoose = true
						this.list = this.alldata
						this.shopcar = res.data
						this.dealShopCar()
						this.shopcarAmount()
					})
				}

			},
			//获取门店列表
			selectClienUser(e) {
				let data = {
					keyword: this.keyword1
				}
				selectClienUser(data).then(res => {
					let arr = []
					this.options = res.data
					res.data.forEach(item => {
						arr.push(item.nickname)
					})
					this.options1 = arr
				})
				console.log(this.options1)

			},
			// 获取设备列表
			getDeviceCategory(a, b, c) {
				console.log('触发事件')
				let params = {
					pid: this.pid
				}
				getDeviceCategory(params).then(res => {
					if (b) {
						this.options2 = res.data
						return
					}
					if (c) {
						this.options3 = res.data
						return
					}
					this.sbglMean = res.data
				})
			},
			// 
			getall() {
				let data = {
					cate_id1: '',
					cate_id2: 0,
					cate_id3: 0
				}
				allDeviceList(data).then(res => {
					console.log('一开始全部的', res.data)
					this.alldata = res.data
				})
			},
			// 选择门店
			choose() {
				console.log('22222', this.options)
				let name = this.$refs.box.inputVal
				let flag = false
				this.options.forEach(item => {
					if (item.nickname == name) {
						flag = true
						this.ischoose = true
						console.log('flag', flag)
					}
				})
				if (flag) return uni.navigateTo({
					url: "/pages/sf/savesb/index"
				})
				if (!flag) return uni.showToast({
					title: "请选择门店!",
					icon: "none"
				})
			},
			// 初始化
			datainit() {
				this.list = []
				let data = {}
				let api = ""
				if (this.userInfo.is_worker == 2) {
					if (this.flag) return
					api = allDeviceList
					data = {
						cate_id1: this.value,
						cate_id2: this.cate_id2,
						cate_id3: this.cate_id3
					}
				} else {
					api = deviceList
					data = {
						cid: this.value,
						keyword: this.keyword,
						page: this.page,
						limit: this.limit,

					}
				}
				api(data).then(res => {
					let shopcar = this.shopcar
					if (shopcar.length != 0) {
						shopcar.forEach(item => {
							res.data.forEach(itemson => {
								if (item.id == itemson.id) {
									itemson.num = item.num
									// console.log(itemson,item)
								}
							})
						})
					}
					this.list = res.data
					this.$refs.list.loadSuccess({
						list: this.list,
						total: this.list.length
					});
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.list.length
					});
				})
			},
			// 计算购物车总数量
			shopcarAmount() {
				let countamout = 0
				this.shopcar.forEach(item => {
					countamout += (item.num)
				})
				return this.num = countamout
			},
			// 左边菜单id
			changeMean(id) {
				this.value = id
				this.pid = this.value
				this.getDeviceCategory(false, true, false)
				this.datainit()
			},
			// 配件数量
			addShopCart(e) {
				// 拿出这一个的数据
				let data = {}
				let i = 0
				let id = e.id
				let value = e.value
				// 找到这个数据
				this.list.forEach(item => {
					if (item.id == id) {
						data = item
					}
				})
				data.num = value
				data.flag = true // 做标记 这里的都是要进oldshop的
				if (this.shopcar.length != 0) {
					let i = 0
					let flag = false
					this.shopcar.forEach(item => {
						i++
						if (item.goods_id == data.id) {
							item.num = item.num+data.num
							flag = true
						} else if (i == this.shopcar.length && flag == false) {
							this.shopcar.push(data)
						}
					}) //变化的先赋值过去
					console.log('过滤前', this.shopcar)
					this.shopcar.filter(function(item) { //过滤没有变化的
						console.log("过滤", item)
						item.num == 0
					})
				}
				if (this.shopcar.length == 0) {
					this.shopcar.push(data)
				}

				this.shopcarAmount()
			},
			// 下拉框下拉选项索引
			getValue1(e) {
				console.log(e)
			},
			// 下拉框下拉选项索引
			getValue2(e) {
				this.pid = this.options2[e].id
				this.cate_id2 = this.options2[e].id
				this.getDeviceCategory(false, false, true)
				this.datainit()
			},
			// 下拉框下拉选项索引
			getValue3(e) {
				console.log(this.options3[e])
				this.cate_id3 = this.options3[e].id
				this.datainit()
			},
			// 加载数据
			load(paging) {
				console.log('pag', paging)
				this.datainit()
			},
			// 查询
			search() {
				this.datainit()
				console.log('触发查询')
			},
			// 刷新数据
			refresh(paging) {
				this.datainit()

			}
		}
	}
</script>

<style scoped lang="less">
	.main {
		height: 100%;
		overflow: hidden;
		position: relative;

		.footer {
			width: 100%;
			position: fixed;
			bottom: 50rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			padding-left: 15%;

			.btn {
				height: 60rpx;
				width: 200rpx;
				margin: 0 20rpx;
				border-radius: 30rpx;
				background-color: #007AFF;
				text-align: center;
				line-height: 60rpx;
			}

			.btn1 {
				background-color: #FECB54;
			}
		}
	}

	.search {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		position: fixed;
		top: 0;
		z-index: 10;
	}

	.search1 {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		position: fixed;
		top: 0;
		z-index: 10;
	}


	.icons {
		width: 100rpx;
		padding: 0 30rpx;
		height: 75rpx;
		text-align: left;
		margin-right: -20rpx;
		font-size: 50rpx !important;
		color: #aaa;
	}

	.search>lauwen-select {
		flex: 1;
		/* margin-right: 30rpx; */
	}

	.search /deep/.lauwen-select-input.data-v-34fe01fd {
		border: none !important;
	}

	.search /deep/.lauwen-select-input-text {
		color: #999999 !important;
	}

	.search .edit-btn {
		width: 120rpx !important;
		height: 60rpx !important;
		background: #007AFF;
		color: #fff;
		padding: 0 20rpx;
		margin-top: 0 !important;
		border-radius: 6rpx !important;
		line-height: 60rpx !important;
		font-size: 30rpx;
		background: #5490FE;
	}

	.sbgl {
		height: 85%;
		overflow: hidden;
		margin-top: 100rpx;

		display: flex;
	}

	.mean {
		height: 93%;
		overflow-y: auto;
	}

	.mean::-webkit-scrollbar {
		display: none;
	}

	.mean-name {
		width: 180rpx;
		height: 180rpx;
		background: #F6F9FF;
		color: #aaa;
		font-size: 32rpx;
		line-height: 180rpx;
		text-align: center;
	}

	.mean-bg {
		background: #029E8E;
		color: #fff !important;
	}

	.detail {
		padding: 0 20rpx;
		flex: 1;
		height: 100%;
		overflow: hidden;

		position: relative;
	}

	.detail-search {
		/* margin-top: 10rpx; */
		width: 100%;
		height: 70rpx;
		background: #fff;

		display: flex;

		position: absolute;
		top: 0;
		z-index: 8;
	}

	.detail-search /deep/.lauwen-select-input.data-v-34fe01fd {
		width: 250rpx;
		/* border: none!important; */
		padding: 10rpx 20rpx !important;
		margin-right: 30rpx;
		border: 1rpx solid #999999;
		color: #666666;
		border-radius: 42rpx;
	}

	.detail-search easy-select {
		margin-right: 20rpx;
	}

	.detail-list {
		/* 		display: flex;
		flex-direction: column; */
		padding-top: 74rpx;
		/* height: 88%; */
	}

	.detail-desc {
		display: flex;
		margin-top: 30rpx;
		background: #F6F9FF;
		width: 100%;
		overflow-y: auto;
	}

	.detail-list::-webkit-scrollbar {
		display: none;
	}

	.detail-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.word-omit {
		/*word-break:break-all;*/
		white-space: nowrap;
		color: #666666;
		/*强制在一行显示*/
		text-overflow: ellipsis;
		/*设置超出内容显示...*/
		overflow: hidden;
		/*一定不能少 超出的内容进行隐藏*/
	}

	.text-omit {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		color: #999999;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/deep/ .uni-searchbar__box.data-v-dc8a797c {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-pack: left;
		-webkit-justify-content: left;
		justify-content: left;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: left;
		-webkit-align-items: left;
		align-items: left;
		height: 36px;
		padding: 5px 8px 5px 0px;
		border-width: 0;
		border-style: solid;
		border-color: #FFFFFF !important;
	}

	/deep/.uni-combox__selector-scroll.data-v-5f8f72c2 {
		max-height: 200px;
		color: #666666;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.popup {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;

		.shop_item1 {
			padding: 5%;
			width: 90%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: center;

			.item {
				margin-left: 10rpx;
				display: block;
				width: 100%;
				height: 120rpx;
				position: relative;
				margin-bottom: 30rpx;

				.name {
					position: absolute;
					top: 0rpx;
					left: 100rpx;
				}

				.ppname {
					position: absolute;
					top: 30rpx;
					color: #999999;
					left: 100rpx;
				}

				.add {
					position: absolute;
					top: 30rpx;
					color: #999999;
					right: 30rpx;
				}

				.price {
					position: absolute;
					top: 40rpx;
					line-height: 40rpx;
					color: #FD3833;
					left: 100rpx;
					font-size: 35rpx;

					.word1 {
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
